<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dialog Test</title>

<link href="fonts.css" rel="stylesheet" type="text/css" />
<link href="reset.css" rel="stylesheet" type="text/css" />

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/container/assets/container.css"/>

<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<!-- OPTIONAL: Animation (only required if enabling Animation) 
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/animation/animation-min.js"></script>
-->
<!-- OPTIONAL: Drag & Drop (only required if enabling Drag & Drop) 
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/dragdrop/dragdrop-min.js"></script>
-->
<!-- OPTIONAL: Connection (only required if performing asynchronous submission) 
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/connection/connection-min.js"></script>
-->
<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/container/container-min.js"></script>

<link href="../styles/map-view.css" rel="stylesheet" type="text/css" />
<!--<link href="../styles/dialog.css" rel="stylesheet" type="text/css" />
<link href="../styles/demo.css" rel="stylesheet" type="text/css" />
-->
<style>
	body { background:#eee }
	label { display:block;float:left;width:45%;clear:left; }
	.clear { clear:both; }
	#resp { font-family:courier;margin:10px;padding:5px;border:1px solid #ccc;background:#fff;}
</style>

<script>
	YAHOO.namespace("example.container");

	function init() {
		
		// Define various event handlers for Dialog
		var handleSubmit = function() {
			this.submit();
		};
		var handleCancel = function() {
			this.cancel();
		};
		var handleSuccess = function(o) {
			var response = o.responseText;
			response = response.split("<!")[0];
			document.getElementById("resp").innerHTML = response;
			eval(response);
		};
		var handleFailure = function(o) {
			alert("Submission failed: " + o.status);
		};

		// Instantiate the Dialog
		YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
																	{ width : "300px",
																	  fixedcenter : true,
																	  visible : false,
																	  constraintoviewport : true,
																	  buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
																				  { text:"Cancel", handler:handleCancel } ]
																	 } );
		
		// Validate the entries in the form to require that both first and last name are entered
//		YAHOO.example.container.dialog1.validate = function() {
//			var data = this.getData();
//			if (data.firstname == "" || data.lastname == "") {
//				alert("Please enter your first and last names.");
//				return false;
//			} else {
//				return true;
//			}
//			return true;
//		};

		// Wire up the success and failure handlers
		YAHOO.example.container.dialog1.callback = { success: handleSuccess,
													 failure: handleFailure };
		
		// Render the Dialog
		YAHOO.example.container.dialog1.render();

		YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
		YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);
	}

	YAHOO.util.Event.addListener(window, "load", init);
	
	function panelOnClick(event) {
		 
		YAHOO.example.container.dialog1.cfg.setProperty("x",event.clientX); 
		YAHOO.example.container.dialog1.cfg.setProperty("y",event.clientY); 
		YAHOO.example.container.dialog1.render(document.body);
		YAHOO.example.container.dialog1.show();

	}
	
</script>
</head>




<body>

	<div onclick="panelOnClick(event);">
        <p><img src="../images/tsm-logo.png" width="246" height="40" /></p>
    <p>lorem imsum sdf sdf afdg sgf gh sgfhgfsgfh gh dghdghdf gh lorem imsum sdf sdf afdg sgf gh sgfhgfsgfh gh dghdghdf ghlorem imsum sdf sdf afdg sgf gh sgfhgfsgfh gh dghdghdf ghlorem imsum sdf sdf afdg sgf gh sgfhgfsgfh gh dghdghdf ghlorem imsum sdf sdf afdg sgf gh sgfhgfsgfh gh dghdghdf ghlorem imsum sdf sdf afdg sgf gh sgfhgfsgfh gh dghdghdf ghlorem imsum sdf sdf afdg sgf gh sgfhgfsgfh gh dghdghdf ghlorem imsum sdf sdf afdg sgf gh sgfhgfsgfh gh dghdghdf ghlorem imsum sdf sdf afdg sgf gh sgfhgfsgfh gh dghdghdf ghlorem imsum sdf sdf afdg sgf gh sgfhgfsgfh gh dghdghdf ghlorem imsum sdf sdf afdg sgf gh sgfhgfsgfh gh dghdghdf ghlorem imsum sdf sdf afdg sgf gh sgfhgfsgfh gh dghdghdf ghlorem imsum sdf sdf afdg sgf gh sgfhgfsgfh gh dghdghdf gh</p>
    </div>
    <div>
        <p><img name="mapimage" src="manhattan-riots-view.jpg" width="627" height="651" onclick="panelOnClick(event);"/></p>
        <button id="show">Show dialog1</button> 
        <button id="hide">Hide dialog1</button>
    </div>

    <div id="dialog1" class="yui-skin-sam">
        <div class="hd">Event Information</div>
        <div class="bd">
            <form method="post" action="../assets/post.php">
                <label for="firstname">Title:</label><input type="textbox" name="firstname" />
                <label for="lastname">Date/Time Range:</label><input value="10 a.m" type="textbox" name="lastname" />
                <label for="location">Address:</label><input value="Third Avenue and 47th Street" type="textbox" name="location" />
                
                <label for="lastname">tags:</label><input type="textbox" />
                <label for="lastname">Source:</label><input value="http://en.wikipedia.org/wiki/New_York_Draft_Riots" type="textbox"  />

                <label for="state[]">Time Space:</label>
                <select name="state[]">
                    <option value="California">Enclopedia</option>
                    <option value="New Jersey">Anecdotes</option>
                    <option value="New York">Current Events</option>
                    <option value="Personal">Personal</option>
                </select> 

                <label for="email">Description:</label><textarea name="" cols="40" rows="3" >At 10 a.m., a furious crowd of 500 soon attacked the assistant Ninth District Provost Marshal's Office, at Third Avenue and 47th Street, where the draft was taking place</textarea> 
                    <div class="clear"></div>


            </form>
        </div>
    </div>

    <div id="resp">Server response will be displayed in this area</div>

</body>
</html>
